<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <el-select v-model="value1" clearable placeholder="请选择数据库表">
                <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-select v-model="value2" clearable placeholder="请选择修改人">
                <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <div class="block">
                <el-date-picker
                        v-model="value3"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right">
                </el-date-picker>
            </div>
        </el-col>
    </el-row>
</template>

<script>

    export default {
        name: "HistoryViewInput",
        methods: {

        },
        data() {
            return {
                searchName:'',
                searchCode:'',
                options1: [{
                    value: '选项1',
                    label: 'ICD表'
                },{
                    value: '选项2',
                    label: '映射表'
                },{
                    value: '选项3',
                    label: '用户表'
                }],
                value1:'',

                options2: [{
                    value: '选项1',
                    label: '张三'
                },{
                    value: '选项2',
                    label: '李四'
                },{
                    value: '选项3',
                    label: '王五'
                }],
                value2:'',

                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value3: ''

            }
        }
    }
</script>

<style scoped>

</style>